<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script type="module">
        // 轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
        import * as THREE from 'three';
        // 创建相机
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(2, 20, 20)
        camera.lookAt(0, 0, 0);


        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        // 创建场景
        const scene = new THREE.Scene();
        // scene.background = new THREE.Color(0x000000);

        const gridHelper = new THREE.GridHelper(100);
        scene.add(gridHelper);


        const sphere1 = new THREE.Mesh(
            new THREE.SphereGeometry(1, 32, 32),
            new THREE.MeshBasicMaterial({ color: 0xffff33, wireframe: false })
        );
        scene.add(sphere1);
        sphere1.position.set(-4, 0, 0);

        const sphere2 = new THREE.Mesh(
            new THREE.SphereGeometry(1, 32, 32),
            new THREE.MeshBasicMaterial({ color: 0xff3333, wireframe: false })
        );
        scene.add(sphere2);
        sphere2.position.set(4, 0, 0);

        const sphere3 = new THREE.Mesh(
            new THREE.SphereGeometry(1, 32, 32),
            new THREE.MeshBasicMaterial({ color: 0x3333ff, wireframe: false })
        );
        scene.add(sphere3);
        sphere3.position.set(0, 8, 0);


        const raycaster = new THREE.Raycaster();

        window.addEventListener('mousedown', (event) => {
            console.log(event);
            // 转换为归一化设备坐标
            const mouse = new THREE.Vector2(
                (event.clientX / window.innerWidth) * 2 - 1,
                -(event.clientY / window.innerHeight) * 2 + 1
            );
            // 设置射线的起点为相机位置
            raycaster.setFromCamera(mouse, camera);
            // 计算射线与场景中的所有物体的交点
            const intersects = raycaster.intersectObjects(scene.children);
            console.log(intersects);
            if (intersects.length > 0) {
                console.log('射线与物体相交');
                for (let i = 0; i < intersects.length; i++) {
                    console.log(intersects[i].object);
                    // 检查是否是mesh
                    if (intersects[i].object.type !== 'Mesh') {
                        continue;
                    }
                    intersects[i].object.material.color.set(0xff0000);
                }
            } else {
                console.log('射线未与任何物体相交');
            }

        })

        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;



        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();


    </script>
</body>

</html>